<template>
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-bold">签到管理</h2>
    <el-button type="primary" @click="showAddCourseDialog">发布签到</el-button>
    <el-dialog v-model="courseDialogVisible" title="发布签到" width="500px">
    <el-form  label-width="80px" ref="courseFormRef">
      <el-form-item
        label="签到描述"
        prop="name"
        :rules="{ required: true, message: '请输入签到描述' }"
      >
        <el-input
          v-model="desc"
          placeholder="请输入签到描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="openSign">确定</el-button>
      </span>
    </template>
  </el-dialog>

  </div>
  <el-table :data="attendanceList" style="width: 100%">
    <el-table-column prop="createdByName" label="发布人" />
    <el-table-column prop="des" label="签到描述" />
    <el-table-column prop="createdTime" label="发布时间" />
    <el-table-column prop="signedCount" label="已签到人" show-overflow-tooltip>
      <template #default="{ row }">
        <div class="flex items-center gap-4 flex-wrap">
          <div
            v-for="item in row.signInUsers"
            :key="item.name"
            class="flex items-center gap-2"
          >
            <span>{{ item.name }}</span>
            <el-tag v-if="item.singedIn" type="success">已签到</el-tag>
            <el-tag v-else type="danger" size="small">未签到</el-tag>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="signVisible" title="发布签到" width="500px">
    <el-form :model="form" ref="formRef">
      <el-form-item
        label="选择签到课程"
        :rules="{
          required: true,
          message: '请选择签到课程',
          trigger: 'change',
        }"
        prop="courseId"
      >
        <el-select v-model="form.courseId" placeholder="请选择签到课程">
          <el-option
            v-for="course in courseList"
            :key="course.id"
            :label="course.name"
            :value="course.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="w-full" @click="submitSign">
          发布签到
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { courseList } from "../composables/useProject";
import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
import { request } from "../../../utils/request";
import { getPublishSignIn, publishSignIn } from "../../../api/modules/course";
const emits = defineEmits<{
  cancel: [];
}>();
const signVisible = ref(false);
const formRef = ref<FormInstance>();
  const courseDialogVisible = ref(false);
  const desc = ref("");
function showAddCourseDialog() {
  courseDialogVisible.value = true;
}
function handleCancel() {
  courseDialogVisible.value =false;
  emits("cancel");
}
const form = reactive({
  courseId: "",
});
function openSign() {
  request({
      fn: publishSignIn,
      params: [desc.value],
      success() {
        handleCancel();
        ElMessage.success("发布签到成功");
        getSignList();
      },
    });
}

function submitSign() {
  formRef.value?.validate((valid) => {
    if (!valid) return;
  });
}

const attendanceList = ref([]);
function getSignList() {
  request({
    fn: getPublishSignIn,
    params: [],
    success(re) {
      attendanceList.value = re.data || [];
    },
  });
  desc.value='';
}

getSignList();
</script>
<style scoped lang="scss"></style>
